<template>
  <div class="modal-from">
    <a-modal
      :bodyStyle="{ padding: '0 24px' }"
      title="美疗项目信息"
      :width="1000"
      style="top: 50px"
      :visible="visible"
      @ok="submit"
      @cancel="handleCancel"
    >
      <div class="table-page-search-wrapper">
        <a-form :form="form" layout="inline">
          <a-row :gutter="24">
            <!--左边-->
            <a-col :span="16" style="border-right: 1px solid #e8e8e8; padding-top: 16px; padding-bottom: 16px">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="项目售价" :wrapperCol="wrapperCol" has-feedback>
                    <a-input-number
                      :min="0"
                      :max="1000000"
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['price', { rules: [{ required: true, message: '请输入！' }] }]"
                    ></a-input-number>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                  <a-form-item label="项目编号" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['code', { rules: [{ required: false, message: '请输入！' }] }]"
                    />
                  </a-form-item>
                </a-col> -->
                <a-col :span="12">
                  <a-form-item label="使用次数" :wrapperCol="wrapperCol" has-feedback>
                    <a-input-number
                      :min="0"
                      :max="1000000"
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['useTimes', { rules: [{ required: true, message: '请输入！' }] }]"
                    >
                    </a-input-number>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="项目名称" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['name', { rules: [{ required: true, message: '请输入！' }] }]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="项目单位" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['itemUnit', { rules: [{ required: false, message: '请输入！' }] }]"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="费用类别" :wrapperCol="wrapperCol" has-feedback>
                    <!-- <a-select allow-clear style="width: 100%" v-decorator="['fylb', {rules: [{ required: true, message: '请选择费用类别！' }]}]" placeholder="请选择" > -->
                    <a-select
                      allow-clear
                      style="width: 100%"
                      v-decorator="['amtType', { rules: [{ required: true, message: '请选择费用类别！' }] }]"
                      placeholder="请选择"
                    >
                      <a-select-option v-for="(item, index) in amtTypeList" :key="index" :value="item.id">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="耗材名称" :wrapperCol="wrapperCol" has-feedback>
                    <!-- <a-select allow-clear style="width: 100%" v-decorator="['fylb', {rules: [{ required: true, message: '请选择费用类别！' }]}]" placeholder="请选择" > -->
                    <a-select allow-clear style="width: 100%" v-decorator="['consumableName']" placeholder="请选择">
                      <a-select-option v-for="(item, index) in amtTypeList" :key="index" :value="item.id">{{
                        item.name
                      }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="所属类别" :wrapperCol="wrapperCol" has-feedback>
                    <!-- <a-tree-select
                      allowClear
                      v-decorator="['parentId',{rules: [{ required: true, message: '请输入！' }]}]"
                      style="width: 100%"
                      :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                      :treeData="treeData"
                      placeholder="请选择类别"
                      :replaceFields="replaceFields"
                      @change="initrOrgName"
                    > -->
                    <a-tree-select
                      allowClear
                      v-decorator="['itemTypeId', { rules: [{ required: true, message: '请输入！' }] }]"
                      style="width: 100%"
                      :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
                      :treeData="treeData"
                      placeholder="请选择类别"
                      :replaceFields="replaceFields"
                      @change="initrOrgName"
                    >
                      <span slot="title" slot-scope="{ id }">{{ id }}</span>
                    </a-tree-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="手术名称" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['operateName', { rules: [{ required: false, message: '请输入！' }] }]"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="拼音码" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['pyCode', { rules: [{ required: false, message: '请输入！' }] }]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="医生分值" :wrapperCol="wrapperCol" has-feedback>
                    <a-input-number
                      :min="0"
                      :max="1000000"
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['doctorScore', { rules: [{ required: false, message: '请输入！' }] }]"
                    ></a-input-number>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="打印简称" :wrapperCol="wrapperCol" has-feedback>
                    <a-input
                      style="width: 100%"
                      placeholder="请输入"
                      v-decorator="['printName', { rules: [{ required: true, message: '请输入！' }] }]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="护士分值" :wrapperCol="wrapperCol" has-feedback>
                    <a-input-number
                      style="width: 100%"
                      :min="0"
                      :max="1000000"
                      placeholder="请输入"
                      v-decorator="['nurseScore', { rules: [{ required: false, message: '请输入！' }] }]"
                    ></a-input-number>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="16">
                  <a-row :gutter="12">
                    <a-col :span="12">
                      <a-form-item label="最低价" :wrapperCol="wrapperCol" has-feedback style="padding: 0">
                        <a-input-number
                          placeholder="0"
                          :min="1"
                          :max="1000000"
                          v-decorator="['minPrice', { rules: [{ required: true, message: '请输入！' }] }]"
                        ></a-input-number>
                      </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item label="最高价" :wrapperCol="wrapperCol" has-feedback>
                        <a-input-number
                          style="width: 100%"
                          placeholder="0"
                          :min="1"
                          :max="1000000"
                          v-decorator="['maxPrice', { rules: [{ required: true, message: '请输入！' }] }]"
                        ></a-input-number>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="24">
                  <a-form-item label="项目说明" :wrapperCol="wrapperCol" has-feedback>
                    <a-textarea :rows="2" style="width: 548px" placeholder="请输入" v-decorator="['remark']" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
            <!--右边-->
            <a-col :span="8" style="padding: 16px 20px">
              <a-form-item label="执行科室" :wrapperCol="wrapperCol" has-feedback>
                <a-select
                  allow-clear
                  style="width: 100%"
                  v-decorator="['execDept', { rules: [{ required: true, message: '请选择执行科室！' }] }]"
                  placeholder="请选择"
                >
                  <a-select-option v-for="(item, index) in deptList" :key="index" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="业绩科室" :wrapperCol="wrapperCol" has-feedback>
                <a-select
                  allow-clear
                  style="width: 100%"
                  v-decorator="['achieveDept', { rules: [{ required: true, message: '请选择业绩科室！' }] }]"
                  placeholder="请选择"
                >
                  <a-select-option v-for="(item, index) in deptList" :key="index" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="二级业绩科室" :wrapperCol="wrapperCol" has-feedback>
                <a-select
                  allow-clear
                  style="width: 100%"
                  v-decorator="['twoDeptId', { rules: [{ required: true, message: '请选择二级业绩科室！' }] }]"
                  placeholder="请选择"
                >
                  <a-select-option v-for="(item, index) in deptList" :key="index" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-row :gutter="[0, 12]">
                  <a-col :span="24">
                    <a-checkbox v-decorator="['isDisabled', { valuePropName: 'checked' }]">是否禁用</a-checkbox>
                  </a-col>
                  <a-col :span="24">
                    <a-checkbox v-decorator="['isExecute', { valuePropName: 'checked' }]">是否需要执行</a-checkbox>
                  </a-col>
                  <a-col :span="24">
                    <a-checkbox v-decorator="['isAchieve', { valuePropName: 'checked' }]">是否核算业绩</a-checkbox>
                  </a-col>
                  <a-col :span="24">
                    <a-checkbox v-decorator="['isUseValueGold', { valuePropName: 'checked' }]"
                      >是否允许使用增值金</a-checkbox
                    >
                  </a-col>
                  <a-col :span="24">
                    <a-checkbox v-decorator="['isDeal', { valuePropName: 'checked' }]">是否成交</a-checkbox>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { addProject, editItem } from '@/api/bd/pm'
import { getDeptList, getItemClasssify, getAmtTypeList } from '@/api/modular/main/customer/customerScene'

export default {
  props: {
    modal_type: {
      type: String,
      default: 'add',
    },
    row_record: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      state: {},
      value: [],
      deptList: [],
      amtTypeList: [],
      treeData: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      replaceFields: {
        title: 'name',
      },
      customer_response: {},
      visible: false,

      form: this.$form.createForm(this),
      customerTableLoading: false,
      pagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
      customerDataTable: [],
    }
  },
  methods: {
    // 初始化方法
    add() {
      this.visible = true
      getItemClasssify().then((res) => {
        this.treeData = res.data
        console.log('树结构', this.treeData)
      })
      getDeptList().then((res) => {
        console.log('科室列表', res.data)
        this.deptList = res.data
      })
      getAmtTypeList().then((res) => {
        console.log('费用列表', res)
        this.amtTypeList = res
      })

      this.$nextTick(() => {
        console.log('行数据', this.modal_type, this.row_record)
        if (this.modal_type == 'add') {
          this.form.resetFields()
          return
        }
        if (this.modal_type == 'edit' && this.row_record.id) {
          const record = this.row_record
          this.customer_response.custormerId = record.id
          this.form.resetFields()
          console.log('record', record, this.customer_response)
          this.row_record.isAchieve = Number(this.row_record.isAchieve) ? true : false
          this.row_record.isDeal = Number(this.row_record.isDeal) ? true : false
          this.row_record.isExecute = Number(this.row_record.isExecute) ? true : false
          this.row_record.isDisabled = Number(this.row_record.isDisabled) ? true : false
          this.row_record.isUseValueGold = Number(this.row_record.isUseValueGold) ? true : false
          console.log(this.row_record.isUseValueGold)
          console.log("this.deptList:",this.deptList)


          // this.row_record.achieveDept = this.deptList.forEach((item) => {
          //   if (item.name === this.row_record.achieveDept) {
          //     this.row_record.achieveDept = item.id
          //   }
          // })
          // let newData = this.deptList.filter(item => {
          //   return item.id == record.achieveDept
          // })
          // newData.achieveDept = newData.id
           
          try {
            this.$nextTick(() => {
              this.form.setFieldsValue({
            
                isAchieve: this.row_record.isAchieve,
                isDeal: this.row_record.isDeal,
                isDisabled: this.row_record.isDisabled,
                isUseValueGold: this.row_record.isUseValueGold,
                isExecute: this.row_record.isExecute,
                itemTypeId: record.itemTypeId,
                twoDeptId: record.twoDeptId,
                achieveDept: record.achieveDept,
                execDept: record.execDept,
                amtType: record.amtType,
                // code: record.code,
                name: record.name,
                printName: record.printName,
                itemUnit: record.itemUnit,
                pyCode: record.pyCode,
                maxPrice: record.maxPrice,
                minPrice: record.minPrice,
                doctorScore: record.doctorScore || 0,
                consumableName: record.consumableName,
                // modifier: record.modifier,
                nurseScore: record.nurseScore || 0,
                operateName: record.operateName || '',
                price: record.price,
                remark: record.remark,
                useTimes: record.useTimes,
              })
            })
            
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    /**
     提交表单
     * */
    submit() {
      const {
        form: { validateFields },
      } = this
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111', errors, values)
          return
        }
        if (this.customer_response.custormerId) {
          values.id = this.customer_response.custormerId //修改时把带来的id一并给后端
          // console.log(values)
          values.isAchieve = values.isAchieve === true ? '1' : '0'
          values.isDeal = values.isDeal === true ? '1' : '0'
          values.isExecute = values.isExecute === true ? '1' : '0'
          values.isDisabled = values.isDisabled === true ? '1' : '0'
          values.isUseValueGold = values.isUseValueGold === true ? '1' : '0'
          //洗数据
          editItem(values).then((res) => {
            res.code === 200
              ? this.$message.success(res.msg || res.message)
              : this.$message.error(res.msg || res.message)
            values.id = '' //根据id来判断东西，这个id在提交后必须重置
            this.customer_response.custormerId = undefined
            this.visible = false //关闭弹框
            this.$emit('search') //刷新
          })
        } else {
          console.log(values)
          values.isAchieve = values.isAchieve === true ? '1' : '0'
          values.isDeal = values.isDeal === true ? '1' : '0'
          values.isExecute = values.isExecute === true ? '1' : '0'
          values.isDisabled = values.isDisabled === true ? '1' : '0'
          values.isUseValueGold = values.isUseValueGold === true ? '1' : '0'
          addProject(values).then((res) => {
            this.visible = false
            res.code === 200
              ? this.$message.success(res.msg || res.message)
              : this.$message.error(res.msg || res.message)
            this.$emit('search')
          })
        }
      })
    },

    chang(val) {
      console.log('test', val)
    },
    initrOrgName(value) {
      console.log('666', value)
      // this.form.getFieldDecorator('parentId', {initialValue: this.orgList.find(item => value === item.id).name})
    },
    /**
     分页动作监听
     * */
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getList()
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head-title {
  font-weight: bold;
}

/deep/ .ant-page-header-heading-title {
  font-weight: normal;
  font-size: 16px;
}

/deep/ .ant-card-body {
  padding: 24px 12px 0 !important;
}
/deep/ .ant-modal-body {
  height: 510px !important;
}
/deep/ .ant-form-item-control-wrapper {
  width: 100%;
}
/deep/ .ant-form-item-control {
  width: 100%;
}
</style>